<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}


</script>
<template>
  <el-row :default-active="activeIndex" mode="horizontal" @select="handleSelect" class="navMenu">
    <el-col  :span="8" index="1" @click="$router.push('/')">三维主场景</el-col>
    <!-- <el-col  :span="8" index="2" @click="$router.push('/Analysis')">数据分析看板</el-col> -->
    <el-col  :span="8" index="3" @click="$router.push('/Farm')">农田管理</el-col>
  </el-row>
</template>

<!-- <el-menu-item index="4" @click="$router.push('/Gallery')">图集展示</el-menu-item> -->
<style scoped lang="less">
.navMenu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 120px;



  .el-col {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    //字体
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;


    &:hover {
      height: 100%;
      color: #000000;
      font-weight: 700;
      //字体
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
  }
}
</style>
